<template>
  <div class="news-feed-area">
    <div class="news-feed news-feed-form">
      <h3 class="news-feed-title">动态发布</h3>
      <form>
        <div class="form-group">
										<textarea name="message" class="form-control"
                              placeholder="分享美好时光..." v-model="content"></textarea>
        </div>
        <ul class="button-group d-flex justify-content-between align-items-center">
          <li class="photo-btn">
            <button type="submit"><i class="flaticon-gallery"></i> 照片</button>
          </li>
          <li class="video-btn">
            <button type="submit"><i class="flaticon-video"></i> 视频</button>
          </li>
          <li class="tag-btn">
            <button type="submit"><i class="flaticon-tag"></i> 话题</button>
          </li>
          <li class="post-btn">
            <button type="button" @click="sendDynamic">发送</button>
          </li>
        </ul>
      </form>
    </div>

    <template v-for="dynamic in dynamicList ">
      <div class="news-feed news-feed-post">
        <div class="post-header d-flex justify-content-between align-items-center">
          <div class="image">
            <a href="my-profile.html"><img :src="dynamic.userInfo.headPic"
                                           class="rounded-circle" alt="image"></a>
          </div>
          <div class="info ms-3">
            <span class="name"><a href="my-profile.html">{{ dynamic.userInfo.nickname }}</a></span>
            <span class="small-text"><a href="#">{{ dynamic.createTime }}</a></span>
          </div>
        </div>
        <div class="post-body">
          <p>{{dynamic.content}}</p>
          <div class="post-image">

          </div>
          <ul class="post-meta-wrap d-flex justify-content-between align-items-center">
            <li class="post-react">
              <a href="#"><i class="flaticon-like"></i><span></span> <span
                  class="number">{{ dynamic.likenum }} </span></a>
              <ul class="react-list">
                <li>
                  <a href="#"><img src="/src/assets/images/react/react-1.png"
                                   alt="Like"></a>
                </li>
                <li>
                  <a href="#"><img src="/src/assets/images/react/react-2.png"
                                   alt="Like"></a>
                </li>
                <li>
                  <a href="#"><img src="/src/assets/images/react/react-3.png"
                                   alt="Like"></a>
                </li>
                <li>
                  <a href="#"><img src="/src/assets/images/react/react-4.png"
                                   alt="Like"></a>
                </li>
                <li>
                  <a href="#"><img src="/src/assets/images/react/react-5.png"
                                   alt="Like"></a>
                </li>
                <li>
                  <a href="#"><img src="/src/assets/images/react/react-6.png"
                                   alt="Like"></a>
                </li>
                <li>
                  <a href="#"><img src="/src/assets/images/react/react-7.png"
                                   alt="Like"></a>
                </li>
              </ul>
            </li>
            <li class="post-comment">
              <a href="#"><i class="flaticon-comment"></i><span>评论</span> <span
                  class="number">0 </span></a>
            </li>
          </ul>
          <div class="post-comment-list">
            <div class="comment-list">
              <div class="comment-image">
                <a href="my-profile.html"><img src="/src/assets/images/user/user-33.jpg"
                                               class="rounded-circle" alt="image"></a>
              </div>
              <div class="comment-info">
                <h3>
                  <a href="my-profile.html">小黑子</a>
                </h3>
                <span>5 Mins Ago</span>
                <p>真好看</p>
                <ul class="comment-react">
                  <li><a href="#" class="like"><i class="flaticon-like"></i>(2)</a></li>
                  <li><a href="#">回复</a></li>
                </ul>
              </div>
            </div>
            <div class="comment-list">
              <div class="comment-image">
                <a href="my-profile.html"><img src="/src/assets/images/user/user-34.jpg"
                                               class="rounded-circle" alt="image"></a>
              </div>
              <div class="comment-info">
                <h3>
                  <a href="my-profile.html">嘤嘤酱</a>
                </h3>
                <span>45 分钟前</span>
                <p>还不错</p>
                <ul class="comment-react">
                  <li><a href="#" class="like"><i class="flaticon-like"></i>(12)</a></li>
                  <li><a href="#">回复</a></li>
                </ul>
              </div>
            </div>

            <div class="more-comments">
              <a href="#">更多评论+</a>
            </div>
          </div>
          <form class="post-footer">
            <div class="footer-image">
              <a href="#"><img src="/src/assets/images/user/user-0.jpg" class="rounded-circle"
                               alt="image"></a>
            </div>
            <div class="form-group">
											<textarea name="message" class="form-control"
                                placeholder="留下评论..."></textarea>
              <label><a href="#"><i class="flaticon-photo-camera"></i></a></label>
            </div>
          </form>
        </div>
      </div>
    </template>

    <div class="load-more-posts-btn">
      <a href="#"><i class="flaticon-loading"></i>加载更多</a>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import axios from '@/plugins/axios.js'

let content = ref("")
const props = defineProps({
  user:Object
})
let sendDynamic = ()=>{
  let url = "dynamics";
  let param = {
    "uid":props.user.uid,
    "content":content.value,
    "type":1
  }
  axios.postJson(url,param).then(result=>{
    alert('发送成功')
  })
}
let dynamicList = ref([])
let pageNum = ref(1)
let queryList = ()=>{
  axios.get("dynamics/page",{pageNum:pageNum.value}).then(result=>{
    dynamicList.value = result.data.list;
  })
}

onMounted(() => {
  queryList();
});
</script>

<style scoped>

</style>